<script setup lang="ts">

</script>

<template>
  <label>图片1：</label>
  <div class="barNew" style="--percentNew: 60;"></div>
  <label>图片2：</label>
  <div class="barNew" style="--percentNew: 40;"></div>
  <label>图片3：</label>
  <div class="barNew" style="--percentNew: 20;"></div>
</template>

<style scoped lang="scss">
.barNew {
  height: 20px; width: 300px;
  background-color: #f5f5f5;
}
.barNew::before {
  display: block;
  counter-reset: progress var(--percentNew);
  content: counter(progress) '%\2002';
  width: calc(1% * var(--percentNew));
  color: #fff;
  background-color: #2486ff;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
}
</style>